<template>
    <div class="namePass">
        <div class="qrcode">

        </div>
        <div class="title">千锋管理系统</div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
            <el-form-item label="账号" prop="userName">
                <el-input v-model="ruleForm.userName" type="text" autocomplete="off" class='ipt1' />
            </el-form-item>
            <el-form-item label="密码" prop="passWord">
                <el-input v-model="ruleForm.passWord" type="password" autocomplete="off" class='ipt2' />
            </el-form-item>
            <el-form-item label="验证码" prop="validateCaptcha">
                <el-input v-model="ruleForm.validateCaptcha" class='ipt3' @keydown.enter="submitForm(ruleFormRef)"
                    type="text" />
                <div class="validateImg" v-html="authCode" @click="verificationCode" v-loading="loading"></div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            </el-form-item>
        </el-form>
        <div class="otherLogin">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-iphone"></use>
            </svg>
            <a href="javascript:;" style="color:rgb(4, 150, 255)" @click="loginChange">切换短信登录</a>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, onMounted, watchEffect, onUnmounted } from 'vue'
import { rules, useLoginState } from '../methods/index'
import * as api from '../api/index'
import { useRouter } from 'vue-router'
import { useLogin } from '../store/cart'
import { storeToRefs } from 'pinia'
//映入loading加载框
import { ElLoading } from 'element-plus'
// import { usePermission } from '../store/permission'
// let permissionStore = usePermission()
//展示加载框
let changeLogin = useLogin()
let { msg } = storeToRefs(changeLogin)
let useRouters = useRouter()
//点击转换登录页面
let loginChange = function () {
    changeLogin.$patch((state) => {
        state.msg = false
    })
}
//控制验证码上方loading是否显示
let loading = ref(true)
const ruleFormRef = ref()
const ruleForm = reactive({
    userName: '',
    passWord: '',
    validateCaptcha: '',
})
//正则验证成功
let validateVictory = async () => {
    loadingFrame = ElLoading.service({
        lock: true,
        text: '正在加载中...',
        background: 'rgba(0,0,0,0.4)'
    })
    console.log('验证成功');
    try {
        //验证验证码是否正确
        let res = await api.verifyCaptureApi(ruleForm.validateCaptcha)

        loginRequest(ruleForm.userName, ruleForm.passWord)
    } catch {
        //验证错误重新调用获取验证码的方法
        loadingFrame.close()
        verificationCode()
    }

}
//正则验证失败
let validateDefeat = () => {
    console.log('验证失败');
}
let loadingFrame = ref(null)
//封装验证账号密码方法
let loginRequest = async (username, password) => {

    try {
        let res2 = await api.loginApi(username, password)
        console.log(res2.data.permission.buttons);
        sessionStorage.setItem('qf-token', res2.data.token)
        changeLogin.$patch((state) => {
            state.userInfo = res2.data.userInfo
            state.btn = res2.data.permission.buttons
        })
        sessionStorage.setItem('userInfo', JSON.stringify(res2.data.userInfo))
        // await permissionStore.fetch_menulist()
        useRouters.push('/')
    } catch (e) {
    }

}
let submitForm = useLoginState(validateVictory, validateDefeat)
//存储验证码的超文本
let authCode = ref()
//获取验证码
let verificationCode = async function () {
    loading.value = true
    let res = await api.getCaptureApi()
    loading.value = false
    authCode.value = res.data.img
}
onMounted(() => {
    verificationCode()
})
onUnmounted(()=>{
    loadingFrame.close()

})



</script>

